import React, { useState, useEffect } from 'react'

import { useHistory } from "react-router-dom";

import { CSSTransition } from 'react-transition-group'

import './Start.scss'


export default () => {
    const [transition, setTransition] = useState(false)
    const history = useHistory()

    useEffect(() => {
        setTransition(true)
    }, [transition])

    function clickHandeler() {
        history.push("/login");
    }

    return (
        <>
            <CSSTransition
                appear={true}
                in={transition}
                timeout={1000}
                unmountOnExit={true}
                classNames="start-up"
            >
                <div className="start-up">
                    <div className="start-text-image">
                        <CSSTransition
                            appear={true}
                            in={transition}
                            timeout={1000}
                            unmountOnExit={true}
                            classNames="icon-warp"
                        >
                            <span className="icon-warp li-iconfont li-icon-img"></span>
                        </CSSTransition>
                        <CSSTransition
                            appear={true}
                            in={transition}
                            timeout={1000}
                            unmountOnExit={true}
                            classNames="rich-text"
                        >
                            <span className="rich-text">打开生活，发现美好</span>
                        </CSSTransition>
                    </div>

                    <CSSTransition
                        appear={true}
                        in={transition}
                        timeout={1000}
                        unmountOnExit={true}
                        classNames="start-button-transition"
                    >
                        <div className="start-button" onClick={clickHandeler}>
                            <span className="start-button-icon li-iconfont li-icon-right-jiantou"></span>
                        </div>
                    </CSSTransition>
                </div>
            </CSSTransition>
        </>
    )
}